import 'package:auto_size_text/auto_size_text.dart';
import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/pages/cart/cart.dart';
import 'package:distribution_mall_flutter/pages/home/home.dart';
import 'package:distribution_mall_flutter/pages/message/message.dart';
import 'package:distribution_mall_flutter/pages/my/my.dart';
import 'package:distribution_mall_flutter/utils/image_loader.dart';
import 'package:distribution_mall_flutter/router/router.dart';
import 'package:flutter/material.dart';

class EPTabbarPage extends StatefulWidget {
  const EPTabbarPage({
    super.key,
  });

  @override
  State<EPTabbarPage> createState() {
    return _EPTabbarPageState();
  }
}

class _EPTabbarPageState extends State<EPTabbarPage> {
  int _select = 0;

  final screens = <Widget>[
    // const HomePage(),
    const MessagePage(),
    const CartPage(),
    const MyPage()
  ];

  final List<String> tabName = [
    // RouterName.home,
    // RouterName.message,
    // RouterName.cart,
  ];

  final List<List<dynamic>> iconList = [
    // [
    //   generateIcon('index.png'),
    //   generateIcon('indexs.png'),
    //   S.current.tab_home,
    // ],
    [
      generateIcon('message.png'),
      generateIcon('messages.png'),
      S.current.tab_message,
    ],
    [
      generateIcon('cart.png'),
      generateIcon('carts.png'),
      S.current.tab_cart,
    ],
    [
      generateIcon('my.png'),
      generateIcon('mys.png'),
      S.current.tab_my,
    ],
  ];

  static Image generateIcon(String path) {
    return Image.asset('${ImageLoader.rootPaht}/tabBar/$path',
        width: 24, height: 24);
  }

  final List<BottomNavigationBarItem> items = [
    // BottomNavigationBarItem(
    //   icon: generateIcon('index.png'),
    //   activeIcon: generateIcon('indexs.png'),
    //   label: S.current.tab_home,
    //   tooltip: null,
    // ),
    BottomNavigationBarItem(
      icon: generateIcon('message.png'),
      activeIcon: generateIcon('messages.png'),
      label: S.current.tab_message,
      tooltip: null,
    ),
    BottomNavigationBarItem(
      icon: generateIcon('cart.png'),
      activeIcon: generateIcon('carts.png'),
      label: S.current.tab_cart,
      tooltip: null,
    ),
    BottomNavigationBarItem(
      icon: generateIcon('my.png'),
      activeIcon: generateIcon('mys.png'),
      label: S.current.tab_my,
      tooltip: null,
    ),
  ];

  final autoSizeGroup = AutoSizeGroup();

  @override
  Widget build(
    BuildContext context,
  ) {
    return Scaffold(
        // body: widget.router,
        body: IndexedStack(
          index: _select,
          children: screens,
        ),

        // bottomNavigationBar: AnimatedBottomNavigationBar.builder(
        //   activeIndex: _select,
        //   itemCount: iconList.length,
        //   // leftCornerRadius: 10,
        //   // rightCornerRadius: 10,
        //   // gapLocation: GapLocation.center,
        //   // backgroundColor: Colors.black,
        //   onTap: (index) => {setState(() => _select = index)},
        //   tabBuilder: (int index, bool isActive) {
        //     return Column(
        //         mainAxisAlignment: MainAxisAlignment.center,
        //         crossAxisAlignment: CrossAxisAlignment.center,
        //         children: [
        //           iconList[index][isActive ? 1 : 0],
        //           Padding(
        //             padding: const EdgeInsets.symmetric(horizontal: 8),
        //             child: AutoSizeText(
        //               iconList[index][2],
        //               maxLines: 1,
        //               style: TextStyle(
        //                   color: isActive
        //                       ? ColorConstant.primaryColor
        //                       : const Color.fromRGBO(184, 189, 195, 1)),
        //               group: autoSizeGroup,
        //             ),
        //           )
        //         ]);
        //   },
        // ));
        bottomNavigationBar: BottomNavigationBar(
          // key: globalBottomTabbarKey,
          onTap: ((index) => setState(() {
                // print('========index $index ${tabName[index]}');
                _select = index;
                // context.goNamed(tabName[index]);
              })),
          selectedFontSize: 12,
          items: items,
          currentIndex: _select,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.white,
          showUnselectedLabels: true,
          unselectedItemColor: const Color.fromRGBO(184, 189, 195, 1),
          selectedItemColor: ColorConstant.primaryColor,
          selectedLabelStyle:
              const TextStyle(color: ColorConstant.primaryColor),
          unselectedLabelStyle: const TextStyle(color: Colors.black),
        ));
  }
}
